<template>
  <div class="Login">
    <div class="planel">
      <h2>良辰后台登录</h2>
      <div class="bar">
        <input 
        type="text" 
        class="input"
        @input="bindInputAccount"
        @change="bindChangeLockText"
        >
        <div class="text">用户名</div>
      </div>
      <div class="bar">
        <input
        type="password"
        class="input password"
        @input="bindInputPassword"
        @change="bindChangeLockText"
        >
        <div class="text">密码</div>
      </div>
      <div class="textArea">
        <div class="welcome">欢迎! 正在{{actionStatu.statu?'登录':'注册'}}:{{role?'商家':'超管'}}</div>
        <div class="noty" v-if="errorIndex!=-1">
          {{errorTextList[errorIndex]}}
        </div>
      </div>
      <div class="buttonArea">
        <button class="comfirm" @click="bindClickConfirm">
          确认
        </button>
        <button class="registe" @click="bindClickAlterAction">
          {{actionStatu.statu?'注册':'登录'}}
        </button>
        <button class="alter" @click="bindClickRole">
          切换
        </button>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'LoginView',
  mounted(){
    document.title = '良辰画廊商城后台登录页面';
  }
}
</script>


<script setup>
  import {useRouter} from 'vue-router';
  import {ref} from 'vue';
  import {requestt} from '../utils/myAxios.js';
  import useUser from '@/store/user.js';
  const router = new useRouter();
  const userStore = useUser();

  //上移文字固定
  function bindChangeLockText(e){
    if(e.target.value.length==0){
      e.target.parentNode.children[1].classList.remove('lock');
      return;
    }
    if(e.target.classList['lock']==undefined){
      e.target.parentNode.children[1].classList.add('lock');
    }
  }

  //用户名
  const account = ref('');
  function bindInputAccount(e){
    account.value = e.target.value;
  }

  //密码
  const password = ref('');
  function bindInputPassword(e){
    password.value = e.target.value;
  }

  //行为切换
  const actionStatu = ref({
    statu:true
  });
  function bindClickAlterAction(){
    actionStatu.value.statu = !actionStatu.value.statu;
    let string = actionStatu.value.statu?"登录":"注册";
    alert("行为切换为："+string);
  }

  //切换角色
  const role = ref(true);
  function bindClickRole(){
    role.value = !role.value;
    let string = role.value?"商家":"超管";
    alert("角色切换为："+string);
  }

  //行为结果相关
  const errorIndex = ref(-1);
  const errorTextList = [
    '账户名或密码错误',
    '账户名已存在'
  ];
  function setLoginError(){
    errorIndex.value = 0;
  }
  function setRegisteError(){
    errorIndex.value = 1;
  }

  //确认按钮函数
  function bindClickConfirm(){
    requestt({
      role:role.value?"Business":"Manager",
      action:actionStatu.value.statu?"login":"registe",
      account:account.value,
      password:password.value
    },(res)=>{
      console.log(res.data);
      if(res.data=="0"){
        //显示失败结果
        actionStatu.value.statu?setLoginError():setRegisteError();
      }else{
        //执行成功后续操作
        if(actionStatu.value.statu==true){
          //登录成功后
          userStore.info = res.data;
          alert("登录成功");
          bindClickNav();
        }else{
          //注册成功后
          alert("注册成功，请登录");
          bindClickAlterAction();//切换至登录状态
        }
      }
    });
  }

  //跳转到主页面
  function bindClickNav(){
    router.push('/main');
  }
</script>


<style scoped lang="scss">
  @import '../style/_theme.scss';
  @import '../style/_initGlobalStyle.scss';
  .Login{
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg,$LoginBGCgradientStart,$LoginBGCgradientEnd);
    display: flex;
    justify-content: center;
    align-items: center;
    .planel{
      width: 20vw;
      height: 15vw;
      background-color: $LoginPlanelColor;
      border-radius: 0.5vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .bar{
        position: relative;
        margin-top: 1vw;
        .input{
          width: 80%;
          padding: 0.3vw 0.5vw;
          font-size: 100%;
          margin: 1vw 0 0 0;
        }
        .input:focus{
          background-color: white;
        }
        .input:focus + .text{
          color: black;
          top: 0;
          background-color: white;
        }
        .text{
          color: $StaticTextColor;
          position: absolute;
          left: 0.7vw;
          top: 1.4vw;
          pointer-events: none;
          transition: top 0.3s ease-in;
        }
        .text.lock{
          color: black;
          top: 0;
          background-color: white;          
        }
      }
      .textArea{
        width: 80%;
        margin: 1vw 0;
        .welcome{
          font-size: 80%;
        }
        .noty{
          font-size: 0.5vw;
          color: red;
        }
      }
      .buttonArea{
        button{
          margin: 0 0.5vw;
          font-size: 90%;
          padding: 0.3vw 0.8vw;
          background-color: $LoginBtnBgColor;
          color:$LoginBtnTextColor;
          border: none;
          font-weight: bolder;
        }
        .registe{
          color: $LoginBtnBgColor;
          background-color: white;
          border: 1px solid $LoginBtnBgColor;
        }
        .alter{
          margin-left: 3vw;
          font-size: 70%;
        }
      }
    }
  }
</style>